<template>
	<yb-popup direction="center" :duration="optionsSync.duration" :options="optionsSync" :visible="visible" @hide="hide">
		<view class="yb-modal yb-flex" :style="{'background-color': optionsSync.bgColor, 'border-radius': Util.pixelunit(optionsSync.radius)}">
			<yb-text :align="optionsSync.type == 1 ? 'start' : 'center'"
			:lines="1"
			v-if="titleSync.text"
			custom-class="title"
			:size="titleSync.size"
			weight="bold"
			custom-style="padding-top: 40rpx; padding-right: 40rpx; padding-left: 40rpx; padding-bottom: 40rpx;"
			:color="titleSync.color"
			:value="titleSync.text"/>
			<scroll-view :style="{'max-height': Util.pixelunit(optionsSync.maxHeight), flex: 1, overflow: 'hidden'}" scroll-y="true">
				<view class="yb-modal-content yb-flex"
				:class="{
					'yb-modal-content-no-title': !titleSync.text && optionsSync.type != 1,
					'yb-align-center': optionsSync.type != 1 && contentSync.text
				}">
					<slot>
						<yb-text :size="contentSync.size" :color="contentSync.color" :value="contentSync.text" />
					</slot>
				</view>
			</scroll-view>
			<view :style="{
				'border-top-width': optionsSync.type == 2 ? '1px' : '',
				'border-top-style': optionsSync.type == 2 ? 'solid' : '',
				'border-top-color': optionsSync.type == 2 ? optionsSync.borderColor : '',
				'margin-right': optionsSync.type == 1 ? '40rpx' : '',
				'padding-left': optionsSync.type == 3 ? '40rpx' : '',
				'padding-right': optionsSync.type == 3 ? '40rpx' : ''
			}"
			v-if="confirmSync.show || cancelSync.show"
			class="yb-modal-btns yb-flex yb-row yb-align-center"
			:class="{
				'yb-justify-end': optionsSync.type == 1
			}">
				<yb-tap
				v-if="item.show"
				:disabled="loading"
				:active="optionsSync.type == 3 ? 'mask' : 'opacity'"
				:custom-style="buttonStyle(item, index)"
				:custom-class="{
					'yb-flex-1': optionsSync.type != 1,
					'yb-justify-center': optionsSync.type != 1,
					'yb-align-center': optionsSync.type != 1,
				}"
				:borderRadius="optionsSync.type == 3 ? item.radius : 0"
				@tap="onClick(index)"
				v-for="(item, index) in buttonsSync"
				:key="index">
					<yb-loading :visible="loading && item.type == 'main'" :size="loadingSync.size" :color="optionsSync.type == 3 ? optionsSync.bgColor : loadingSync.color" :type="loadingSync.type"></yb-loading>
					<template v-if="!loading || item.type == 'less'">
						<yb-text :size="item.size" :color="optionsSync.type == 3 && item.type == 'main' ? optionsSync.bgColor : item.color" :value="item.text" />
					</template>
				</yb-tap>
			</view>
		</view>
	</yb-popup>
</template>

<script>
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	import Util from '../../js_sdk/util.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			title: {
				type: [Object,String],
				default () {
					return new Object
				}
			},
			content: {
				type: [Object,String],
				default () {
					return new Object
				}
			},
			confirm: {
				type: [Object,String,Boolean],
				default () {
					return new Object
				}
			},
			cancel: {
				type: [Object,String,Boolean],
				default () {
					return new Object
				}
			},
			buttons: {
				type: Array,
				default () {
					return new Array
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			Util () {
				return Util
			},
			titleSync () {
				return Object.assign({}, {
					text: '',
					color: '#333',
					size: '36rpx'
				}, Util.typeof(this.title) == 'Object' ? this.title : {text: this.title})
			},
			contentSync () {
				return Object.assign({}, {
					text: '',
					color: '#666',
					size: '30rpx'
				}, Util.typeof(this.content) == 'Object' ? this.content : {text: this.content})
			},
			confirmSync () {
				return Object.assign({}, {
					text: '确认',
					value: 'confirm',
					color: '#21C088',
					size: '32rpx',
					type: 'main',
					radius: '20rpx',
					show: true
				}, Util.typeof(this.confirm) == 'Object' ? this.confirm : Util.typeof(this.confirm) == 'Boolean' ? {show: this.confirm} : {text: this.confirm})
			},
			cancelSync () {
				return Object.assign({}, {
					text: '取消',
					value: 'cancel',
					color: '#666',
					size: '32rpx',
					type: 'less',
					radius: '20rpx',
					show: true
				}, Util.typeof(this.cancel) == 'Object' ? this.cancel : Util.typeof(this.cancel) == 'Boolean' ? {show: this.cancel} : {text: this.cancel})
			},
			buttonsSync () {
				return this.buttons.length > 0 ? this.buttons.map(button => {
					return Object.assign({}, {
						text: '按钮',
						value: null,
						color: '#666',
						size: '32rpx',
						show: true,
						radius: '20rpx',
						type: 'less'
					}, Util.typeof(button) == 'Object' ? button : {text: button})
				}) : [
					this.cancelSync,
					this.confirmSync
				]
			},
			loadingSync () {
				return Object.assign({}, {
					type: 1,
					color: '#21C088',
					size: '40rpx'
				}, Util.typeof(this.optionsSync.loading) == 'Object' ? this.optionsSync.loading : {})
			},
			optionsSync () {
				return Object.assign({}, {
					bgColor: '#fff',
					type: 1,
					radius: 20,
					borderColor: '#ccc',
					popout: 'fade',
					mask: true,
					maxHeight: '800rpx',
					duration: 200,
					loading: {}
				}, this.options)
			}
		},
		data () {
			return {
				isClick: false,
				loading: false
			}
		},
		methods: {
			hide () {
				if ( !this.isClick || this.loading ) {
					this.$emit('hide')
					this.$emit('update:visible', false)
				}
				this.isClick = false
				this.loading = false
			},
			showLoading () {
				this.loading = true
			},
			onClick (index) {
				if ( this.loading ) {
					return
				}
				this.isClick = true
				if ( this.buttons.length == 0 ) {
					if ( this.buttonsSync[index].value == 'confirm' ) {
						this.$emit('confirm')
					} else {
						this.$emit('cancel')
					}
				} else {
					this.$emit('buttonClick', {
						index: index,
						detail: this.buttonsSync[index]
					})
				}
				this.$emit('update:visible', false)
			},
			buttonStyle (btn, index) {
				return this.filterStyle(
					this.optionsSync.type == 3 ? btn.type == 'less' ? {
						'border-width': '1px',
						'border-style': 'solid',
						'border-color': btn.color,
						'margin-right': index < this.buttonsSync.length - 1 ? '40rpx' : '',
						height: '70rpx'
					} : {
						'background-color': btn.color,
						'margin-right': index < this.buttonsSync.length - 1 ? '40rpx' : '',
						height: '70rpx'
					} : this.optionsSync.type == 1 ? {
						'margin-right': index < this.buttonsSync.length - 1 ? '60rpx' : ''
					} : this.optionsSync.type == 2 ? {
						'border-right-width': index < this.buttonsSync.length - 1 ? '1px' : '',
						'border-right-style': index < this.buttonsSync.length - 1 ? 'solid' : '',
						'border-right-color': index < this.buttonsSync.length - 1 ? this.optionsSync.borderColor : '',
						height: '100rpx'
					} : {}
				)
			}
		}
	}
</script>

<style scoped>
	.yb-modal {
		width: 650rpx;
	}
	.yb-modal-content {
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-bottom: 40rpx;
	}
	.yb-modal-content-no-title {
		padding: 80rpx 40rpx;
	}
	.yb-modal-btns {
		height: 100rpx;
	}
</style>
